<template>
  <div>
    <el-row style="width: 70vw;margin: 30px">
      <el-tooltip effect="dark" placement="right"
                  v-for="honor in honors" :key="honor.hwId">
        <p slot="content" style="font-size: 14px;margin-bottom: 6px;">{{honor.hwTitle}}</p>
        <p slot="content" style="width: 300px" class="abstract">{{honor.hwIntroduction}}</p>
          <el-card style="width: 220px;margin: 20px;height: 180px;float: left;" bodyStyle="height: 170px;padding:10px" shadow="hover">
            <div class="cover">
              <img :src="honor.hwPicture" style="width:200px;height: 120px " alt="奖项图片">
            </div>
            <div class="info" style="height: 50px;width: 10px;">
              <div class="title" style="width: 185px;height: 25px; overflow: hidden; ">
                <span class="title">{{honor.hwTitle}}</span>
              </div>
              <div class="date" style="width: 185px;height: 25px;">
                <i v-if="isRootView" style="float: left;margin: 0 10px 0 0" class="el-icon-delete" @click="deleteHonor(honor)"></i>
                <i v-if="isRootView" style="float: left;" class="el-icon-edit" @click="editHonor(honor)"></i>
                <span class="date" style="">{{honor.pushTime|datefmt}}</span>
              </div>
            </div>
          </el-card>
      </el-tooltip>
      <honor-edit @onSubmit="loadHonor" ref="edit"></honor-edit>
      <el-dialog
        title="删除用户信息"
        :visible.sync="dialogDelete">
        <span>此操作会永久删除用户{{selectHonorTitle}}，并且不可恢复</span>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDelete = false">取 消</el-button>
          <el-button type="primary" @click="deleteX">确 定</el-button>
        </div>
      </el-dialog>
      <el-pagination
        background
        style="float:right;"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import api from '../../../apis/admin/honor'
import {Message} from 'element-ui'
import HonorEdit from './HonorEdit'

export default {
  name: 'HonorCard',
  props: {
    isRootView: Boolean
  },
  components: {HonorEdit},
  data () {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 11,
      selectHonorId: 0,
      selectHonorTitle: '',
      dialogDelete: false,
      honors: []
    }
  },
  mounted () {
    this.loadHonor()
  },
  methods: {
    async loadHonor () {
      const result = await api.loadHonor(this.currentPage, this.pageSize)
      if (result.code === 200) {
        this.total = result.data.total
        this.honors = result.data.records
      } else {
        Message.error(result.msg)
      }
    },
    async deleteX () {
      const result = await api.deleteHonor(this.selectHonorId)
      if (result.code === 200) {
        Message.success(result.msg)
        await this.loadHonor()
      } else {
        Message.error(result.msg)
      }
      this.dialogDelete = false
    },
    deleteHonor (honor) {
      this.selectHonorId = honor.id
      this.selectHonorTitle = honor.hwTitle
      this.dialogDelete = true
    },
    editHonor (honor) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.form = honor
      this.loadHonor()
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.loadHonor()
    }
  }
}
</script>

<style scoped>
.cover {
  width: 115px;
  height: 120px;
  margin-bottom: 20px;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  display: table-cell;
}
.info {
  /*float: bottom;*/
  margin: 5px;
  color: #000000;
  font-size: 10px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}
.info p {
  line-height: 1;
}
.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.info a:hover {
  text-decoration: underline;
}
.title {
  font-size: 14px;
  text-align: left;
}
.date{
  font-size: 10px;
  text-align: right;
}
</style>
